<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="info">
            <view class="info-list">
                <view class="info-content" v-for="(item,index) in data.video_list" :key="item.id">
                    <view class="info-bg">
                        <view class="info-video">
                            <video autoplay="true" controls="controls" :id="'video_'+index" :src="item.url" v-if="data.show_video==index"></video>
                            <block v-else>
                                <image @tap="play" class="bg" :data-index="index" :src="item.pic_url"></image>
                                <image @tap="play" class="play" :data-index="index" :src="data.__wxapp_img.dapp.video_play.url"></image>
                            </block>
                        </view>
                        <view class="info-label">{{item.title}}</view>
                        <view :class="['content', item.show!=-1?'':'more']">{{item.content}}</view>
                        <view class="flex-y-center flex-x-center" style="position:relative;height:80upx;font-size:9pt;color:#afafaf">
                            <text class="flex-y-center left">{{item.time}}</text>
                            <view @tap="more" class="right flex-y-center" :data-index="index">
                                <image :animation="data.animationData" :src="item.show!=-1?data.__wxapp_img.dapp.up.url:'/static/images/icon-down.png'"></image>
                                <text :data-index="index">展开</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	import Vue from 'vue'
	var t = Vue.prototype.getApp, a = t.api, o = !1, i = !1;
	export default {
		data() {
			return {
				data: {
        page: 1,
        video_list: [],
        url: "",
        hide: "hide",
        show: !1,
        animationData: {}
    },
			};
		},
		onLoad: function(a) {myVue = this;
        t.page.onLoad(this, a), this.loadMoreGoodsList(), o = !1, i = !1;
    },
    onReady: function() {},
    onShow: function() {
        t.page.onShow(this);
    },
    onHide: function() {
        t.page.onHide(this);
    },
    onUnload: function() {
        t.page.onUnload(this);
    },
    onPullDownRefresh: function() {},
		onReachBottom: function() {
        var t = this;
        i || t.loadMoreGoodsList();
    },
		methods: {
			loadMoreGoodsList: function() {
        var e = this;
        if (!o) {
            e.setData({
                show_loading_bar: !0
            }), o = !0;
            var n = e.data.page;
            t.request({
                url: a.default.video_list,
                data: {
                    page: n
                },
                success: function(t) {
                    0 == t.data.list.length && (i = !0);
                    var a = e.data.video_list.concat(t.data.list);
                    e.setData({
                        video_list: a,
                        page: n + 1
                    });
                },
                complete: function() {
                    o = !1, e.setData({
                        show_loading_bar: !1
                    });
                }
            });
        }
    },
    play: function(t) {
        var a = t.currentTarget.dataset.index;
        return myVue.getApp.core.createVideoContext("video_" + this.data.show_video).pause(), 
        void this.setData({
            show_video: a,
            show: !0
        });
    },
		//#ifndef H5
		more: function(t) {
        var a = this, o = t.target.dataset.index, i = a.data.video_list, e = myVue.getApp.core.createAnimation({
            duration: 1e3,
            timingFunction: "ease"
        });
        this.animation = e, -1 != i[o].show ? (e.rotate(0).step(), i[o].show = -1, a.setData({
            video_list: i,
            animationData: this.animation.export()
        })) : (e.rotate(0).step(), i[o].show = 0, a.setData({
            video_list: i,
            animationData: this.animation.export()
        }));
    },
		//#endif
		// #ifdef H5
		more: function(t) {
		    var a = this, o = t.target.dataset.index, i = a.data.video_list;
		    -1 != i[o].show ? ( i[o].show = -1, a.setData({
		        video_list: i,
		        
		    })) : ( i[o].show = 0, a.setData({
		        video_list: i
		    }));
		},
		// #endif
		},
	}
</script>

<style scoped>
.info {
    overflow-x: hidden;
    padding-bottom: 20upx;
}

.info .info-list {
    margin-right: -10upx;
    margin-left: -10upx;
}

.info-content {
    padding: 0 10upx;
    width: 100%;
    display: inline-block;
    margin-bottom: 20upx;
}

.info-content .info-bg {
    background-color: #fff;
    position: relative;
    width: 100%;
    height: 100%;
}

.info-content .info-video {
    width: 100%;
    height: 422upx;
    background-color: #fff;
    position: relative;
}

.hide {
    display: none;
}

.info-content .info-video .bg {
    width: 100%;
    height: 422upx;
    position: absolute;
    top: 0;
    left: 0;
}

.info-content .info-video .play {
    width: 128upx;
    height: 128upx;
    position: absolute;
    top: 137upx;
    left: 311upx;
    opacity: 0.8;
}

.info-content .info-video video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.info-content .info-label {
    width: 100%;
    height: 100upx;
    line-height: 100upx;
    padding: 0 24upx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
}

.modal {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,1);
    z-index: 9999;
}

.modal video {
    width: 100%;
    height: 430upx;
}

.no-scroll {
    height: 100%;
    overflow-y: hidden;
}

.info-content .content {
    padding: 0 24upx;
}

.info-content .content.more {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.info-content .left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0 20upx;
}

.info-content .right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0 20upx;
}

.info-content .right image {
    width: 18upx;
    height: 10upx;
    margin-right: 16upx;
}
</style>
